<!--
 * @Author: your name
 * @Date: 2021-12-16 16:03:43
 * @LastEditTime: 2021-12-16 19:36:40
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day8vue3\my-app\src\components\WatchEffects.vue
-->
/<template>
  <div>
      <p>{{title}}</p>
      <p>{{count}}</p>
      <button @click="changeTitle">改变</button>
  </div>
</template>

<script>
import {ref,watchEffect} from "vue"

export default {
    setup(){
        let title=ref("1907C")
        let count=ref(10)
        const changeTitle=()=>{
            title.value="666"
            count.value++
            if(count.value>15){
                stop()
            }
        }
        // 立即执行  值发生改变也执行
        let stop=watchEffect((onInvalidate)=>{
            console.log(count.value);
            let timer=setTimeout(()=>{
                console.log(111);
            },1000);

            onInvalidate(()=>{
                clearTimeout(timer)
            })
        })

        return {
            title,
            changeTitle,
            count
        }
    }
}
</script>

<style>

</style>